<template>
  <div style="width: 100%">
    <template>
      <div v-if="mode === 'edit'">
        <div class="content-box"  @click.stop="handlePicker">
          <div :class="{'input-disabled' : disabledOrReadonly}" style="height: 100%;flex: 1;">
            <template v-if="value">
              {{ value }}
            </template>
            <div v-else class="placeholder">
              {{ !disabledOrReadonly ? $attrs.placeholder : ''}}
            </div>
          </div>
          <div style="float:right;">
            <van-icon v-if="value && $attrs.isClearable && !disabledOrReadonly" name="clear" @click.stop="clear" />
            <van-icon name="arrow" v-if="!disabledOrReadonly" @click="show = true" />
          </div>
        </div>
        <!-- <van-cell title="日历" is-link :value="value" @click="show = true" />
          <template slot="right-icon">
            <van-icon name="arrow" :title="value" />
          </template>
        </van-cell> -->
        <van-calendar color="#38f" :minDate="minDate" v-model="show" :type="isRange ? 'range' : 'single'" @confirm="onConfirm" />

      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "calendar",
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit",
    },
    isRange: {
      default: false
    },
    minDate: {
      default: new Date(2017, 0, 1)
    },
    maxDate: {
      default: new Date(2030, 12, 31)
    }
  },
  data() {
    return {
      show: false,
      time: "",
      today: "",
    };
  },
  computed: {
    disabledOrReadonly(){
      return this.$attrs.readonly || this.$attrs.disabled
    }
  },
  mounted() {},
  methods: {
    onConfirm(date) {
      let val = null
      this.show = false;
      if (this.isRange) {
        // 范围
        const [start, end] = date;
        val = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      } else {
        // 单个
        val = this.formatDate(date);
      }
      this.$emit('input', val)
    },
    clear() {
      this.$emit('input', '')
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.van-cell__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-box {
  display: flex;
}
</style>
